import { useState, useEffect } from "react"
import { useNavigate } from 'react-router-dom'
import request from "../../../api/index"
import Clock from "../../canvas/Clock"
import '../home.css'
import Img from '../../assets/jump.gif'
import vid from '../../assets/带狗子来看windows桌面.mp4'

// import ImportedWorker from './../../worker/worker?worker'
// const worker = new ImportedWorker()

// worker.postMessage({type:'text'})


let baseurl = import.meta.env.VITE_API_URL


function List(props) {

  const [active,setactive] = useState(0)

  const mouseEnter = (id) => {
    setactive(0)
    setactive(id)
  }

  const mouseLeave = () => {
    setactive(0)
  }

  return <div className="item">
    <div className="title"><span>{props.title}</span></div>
      <ul className="filmlist">
        {
          props.list.map((val,index) => <li onMouseLeave={mouseLeave} onMouseEnter={() => mouseEnter(props.title + index)} key={val.directory}>
            <h3 onClick={() => props.changePage(props.path,{title:props.title,source:val})}>{val.directory}</h3>
            <img src={active === (props.title + index) ? Img:''} alt="" />
          </li>)
        }
      </ul>
  </div>
}



function TextCom(){
  const [msg,setmsg] = useState('')
  // const [left,setleft] = useState(0)

  const initEvSoc = () => {
    const evSource = new EventSource(baseurl + '/sse/gettime')
    
    evSource.onopen = () => {
      console.log('长链接已打开');
    }
  
    evSource.onmessage = (e) => {
      console.log(e.data);
      let str = JSON.parse(e.data).message
      // setmsg(old + str)
      // setmsg((msg => msg + str))
      setmsg((msg => str))
      // setleft((left => left - 1000))
      // console.log('收到长链接消息');
      // evSource.close()
    }
  
    evSource.onerror = () => {
      console.log('长链接断开');
      evSource.close()
    }
  }

  useEffect(() => {
    initEvSoc()

  },[])


  return <div>
    {/* <p style={{position: "fixed",left:left,width:'max-content',transition:'10s linear'}}>{msg}</p> */}
    <p >{msg}</p>
  </div>
}


function Home() {

// console.log('home');

  
  

  const [list,setlist] = useState([])

  const navigate = useNavigate()
  useEffect(() => {
    getData()
    
  },[])

  
  const getData = async () => {
    const res = await request.getSourceList()
    console.log(res);
    if (res.code === 200){
      const datalist = Object.values(res.data).map((item) => {
        let path = item.category === '音乐' ? '/music':'/video'
        return {path,...item}
      })
      setlist(datalist)
    }
  }

  const changePage = (path,params) => {
    navigate(path,{
      replace:false,
      state:params
    })
  }


  return <>
    <div className="home">

      {/* <div className="bg">
        <video  autoPlay loop muted>
          <source src={vid} type='video/mp4' />
        </video>
      </div> */}
      {/* <Clock></Clock> */}
      <div className="wrap">
        <div className="logo" style={{position:'relative'}}>
          <h1>{document.title}</h1>
          {/* <TextCom></TextCom> */}
          <></>
        </div>
        <div className="content">
          {
            list.map((item) => {
              if (item.list.length > 0) {
                return  <List  key={item.category} {...{path:item.path,title:item.category,list:item.list,changePage}}></List>
              }
            })
          }
        </div>
      </div>
    </div>
  </>
}

export default Home